@import 'color.less';

.x-text-primary {
  color: @primary;
}

.x-bg-white {
  background: #FFFFFF;
}

.x-bg-primary {
  background-color: @primary;
}

.x-text-warn {
  color: @warn;
}

.x-bg-warn {
  background-color: @warn;
}

.x-text-danger {
  color: @danger;
}

.x-bg-danger {
  background-color: @danger;
}

.x-text-disabled {
  color: @disabled;
}

.x-bg-success {
  background-color:@success;
}

.x-text-success {
  color:@success;
}

.x-bg-disabled {
  background-color: @disabled;
}


.x-full {
  width: 100%;
}

.x-full-center {
  width: 100%;
  text-align: center;
}

.x-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.x-row-start {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}


.x-row-reverse {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.x-column {
  display:flex;
  flex-direction: column;
  align-items: center;
}

.x-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.x-space-between-start {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.x-space-between-end {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.x-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.x-full-image {
  width: 100%;
  height: 100%;
}


.x-blod {
  font-weight: bold;
}

.clear-fix {
  clear: both;
}


.x-padding-10 {
  padding: 10rpx;
  box-sizing: border-box;
}

.x-padding-20 {
  padding: 20rpx;
  box-sizing: border-box;
}

.x-padding-25 {
  padding: 25rpx;
  box-sizing: border-box;
}

.x-padding-30 {
  padding: 30rpx;
  box-sizing: border-box;
}

.x-margin-20 {
  margin: 20rpx;
}

.x-margin-25 {
  margin: 25rpx;
}

.x-margin-30 {
  margin: 30rpx;
}

.x-small-top {
  margin-top: 20rpx;
}

.x-small-bottom {
  margin-bottom: 20rpx;
}

.x-small-left {
  margin-left: 20rpx;
}

.x-small-right {
  margin-right: 20rpx;
}

.x-normal-top {
  margin-top: 30rpx;
}

.x-normal-bottom {
  margin-bottom: 30rpx;
}

.x-normal-left {
  margin-left: 30rpx;
}

.x-normal-right {
  margin-right: 30rpx;
}

.x-inner-small-top {
  padding-top: 20rpx;
  box-sizing: border-box;
}

.x-inner-small-bottom {
  padding-bottom: 20rpx;
  box-sizing: border-box;
}

.x-inner-small-left {
  padding-left: 20rpx;
  box-sizing: border-box;
}

.x-inner-small-right {
  padding-right: 20rpx;
  box-sizing: border-box;
}


.x-inner-normal-top {
  padding-top: 30rpx;
  box-sizing: border-box;
}

.x-inner-normal-bottom {
  padding-bottom: 30rpx;
  box-sizing: border-box;
}

.x-inner-normal-left {
  padding-left: 30rpx;
  box-sizing: border-box;
}

.x-inner-normal-right {
  padding-right: 30rpx;
  box-sizing: border-box;
}

.x-btn {
  min-width: 120rpx;
  font-size: 28rpx;
  position: relative;
  box-sizing: border-box;
  color: #626e82;
  border-radius: 10rpx;
  text-align: center;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.x-small-btn {
  padding: 10rpx 16rpx;
  font-size: 24rpx;
  border-radius: 8rpx;
}


.x-btn-primary {
  background-color: @primary;
  color: #fff;
  border: none;
}

.x-btn-danger {
  background-color: @danger;
  color: #fff;
  border: none;
}

.x-btn-default {
  color: #677286;
  border: 1px solid rgba(196, 196, 196, 1);
}

.x-btn-plain-default {
  color: #677286;
  border: 1px solid rgba(196, 196, 196, 1);
}

.x-btn-plain-primary {
  color: @primary;
  border: 1px solid @primary;
}

.x-btn-plain-danger {
  color: @danger;
  border: 1px solid @danger;
}
